<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
    .active{
      font-weight: 800;
    }
    .sendcode{
      background: #ccc;

    }
    .sendactive{
      background: #f7be3d;
    }
    </style>
</head>
<body style="background: white;height: 100%;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span tapmode style="position:absolute;right:10px;font-size:14px;color:#9D0152" v-open-win.tapmode vurl="coderegister">注册</span>
</div>
<div class="login1 main-container" id="app" v-cloak>
  <div style="padding-top:60px;margin-left:20px;">
      <div class="coderegister_top">
          <div style="font-size:30px;color:#9D0152;float:left;line-height: 50px;font-family:'ArialRoundedMTBold'">Hi</div>
          <div class="coderegister_top_word">欢迎来到友人店</div>
      </div>
  </div>
    <div class="login1-body tab-card" >
        <div class="body-out">
          <div class="bd-line qrcode" style="border-bottom: 1px solid #E5E5E5;">
              <div style="" class="send-border">
                  <input type="number" placeholder="请输入手机号码" v-model.number="codephone" v-input-click
                         style="width: 60%;"/>
              </div>
          </div>
            <div class="bd-line qrcode" style="border-bottom: 1px solid #E5E5E5;padding-top:10px">
                <div class="send-border" style="position:relative">
                    <input type="text" placeholder="请输入验证码"  v-model="code" v-input-click
                    />
                    <sendcode class="sendcode" :class="{'sendactive':codephone}" :phone="codephone" type="9" style="position:absolute;top:50%;right:0px;background:none"></sendcode>
                </div>
            </div>
            <div class="bt-login1">
                <a class="btn login1-btn" :class="{'register-btn':codephone&&code}"
                   v-myclick="codelogin">登录</a>
            </div>
            <div class="forget-password" style="padding-top:20px">
                <span class="codelogin" v-open-win.tapmode vurl="login" style="height:15px;line-height:15px">密码登录</span>
            </div>
        </div>
    </div>
    <div class="login1-footer">
        <div class="login1-else">
            <div class="box1 box"></div>
            <div class="box2">第三方登录</div>
            <div class="box3 box"></div>
        </div>
        <div class="login1-img" v-cloak>
            <div class="img-one" :style="{width:imgOneWidth}" v-myclick="login_taobao">
                <img v-src="'../../image/login_tb.png'"/>
            </div>
            <div class="img-one" :style="{width:imgOneWidth}" v-myclick="login_wx" v-if="appInstalled.wx">
                <img v-src="'../../image/login_wx.png'"/>
            </div>
            <div class="img-one" :style="{width:imgOneWidth}" v-myclick="login_qq" v-if="appInstalled.qq">
                <img v-src="'../../image/login_qq.png'"/>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>
    var vm,
        wx,
        jd,
        aliTradePlus,
        qq,
        talkingData;
    apiready = function () {
        setBSImg();
        new Vue({
            el:'#blank'
        })
        if (api.pageParam && api.pageParam.startImg) {
            var startImg = api.pageParam.startImg;
            if (startImg.need_login == '0') {
                openWin('../home/browser', {url: startImg.url});
            } else {
                alert('请先登录');
            }
        }

        talkingData = api.require('talkingData');
        wx = api.require('wx');
        aliTradePlus = api.require('webBrowser');
        jd = api.require('jd');
        qq = api.require('QQPlus');
        setBSImg();
        initApp();
        doubleBack();
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                phone: '',
                password: '',
                codephone: '',
                code:'',
                verificationcode: '',
                isClose: true,
                BSImg: {
                    big: isBigImg,
                    small: !isBigImg
                },
                appInstalled: {
                    wx: true,
                    qq: true,
                },
               active: false
            },
            computed:{
              imgNum:function () {
                  if(this.appInstalled.wx && this.appInstalled.qq) {
                      return 3;
                  }else if(!this.appInstalled.wx && !this.appInstalled.qq) {
                      return 1;
                  }else{
                      return 2
                  }
              },
                imgOneWidth:function () {
                    switch (this.imgNum) {
                        case 2:
                            return '50%';
                        case 3:
                            return '33.3%';
                        case 4:
                            return '25%';
                    }
                },
            },
            methods: {
                changeStyle: function (value) {
                    this.isClose = !value;
                },
                codelogin: function () {
                    if (!this.codephone) {
                        pinet.alert("请输入手机号");
                        return;
                    }
                    if (!this.code) {
                        pinet.alert("请输入验证码");
                        return;
                    }
                    showProgress();

                    var data = {
                        phone: this.codephone,
                        verify_code: this.code,
                        type:9,
                        jpush_token: getPrefs('jpush_token') || ''
                    };
                    if (hasPrefs('member_id')) {
                        data.member_id = getPrefs('member_id');
                    }
                    var callback = function (ret) {
                        vm.login_init(ret.content, 'phone');
                    };
                    pinet.post(URL.codelogin, data, callback);
                },
                login_init: function (user, provider) {
                    closeWin('index');
                    setPrefs('user', user);
                    setPrefs('token', user.token);
                    setPrefs('member_id', user.member_id);
                    api.sendEvent({
                        name: 'reLogin'
                    });
                    if (user.member_type == '3'||user.member_type == '4') {
                        openWin('../user/user2');
                    } else {
                        openWin('../../index', {to:4,fromChangeUser:true});
                    }
                },
                bindAccount: function (params, data, provider) {
                    data['jpush_token'] = getPrefs('jpush_token') || '';
                    if (hasPrefs('member_id')) {
                        data.member_id = getPrefs('member_id');
                    }
                    var callback = function (ret) {
                        if (ret.content.result) {
                            vm.login_init(ret.content, provider);
                        } else {
                            openWin('../login/setInfo', params);
                        }
                    };
                    pinet.post(URL.oauthLogin, data, callback);
                },
                login_wx: function () {
                    wx.auth({}, function (ret, err) {
                        if (!ret.status) {
                        } else {
                            wx.getToken({
                                code: ret.code
                            }, function (ret, err) {
                                if (!ret.status) {
                                    alert('获取授权 accessToken失败:' + err.code);
                                } else {
                                    showProgress();
                                    wx.getUserInfo({
                                        accessToken: ret.accessToken,
                                        openId: ret.openId
                                    }, function (ret, err) {
                                        if (!ret.status) {
                                            alert('获取用户信息失败:' + err.code);
                                        } else {
                                            var params = {
                                                nickname: ret.nickname,
                                                sex: ret.sex,
                                                portrait: ret.headimgurl,
                                                openid: ret.openid,
                                                unionid: ret.unionid || '',
                                                oauth: 'Weixin'
                                            };
                                            var data = {
                                                openid: ret.openid,
                                                oauth: 'Weixin',
                                                unionid: ret.unionid || ''
                                            };
                                            vm.bindAccount(params, data, 'Weixin');
                                        }
                                    });
                                }
                            });
                        }
                    });
                },
                login_qq: function () {
                    qq.login(function (ret, err) {
                        if (ret.status) {
                            var data = {
                                openid: ret.openId,
                                oauth: 'Qq',
                                unionid: ret.unionid || ''
                            };
                            qq.getUserInfo(function (ret, err) {
                                if (ret.status) {
                                    var params = {
                                        nickname: ret.info.nickname,
                                        sex: ret.info.gender,
                                        portrait: ret.info.figureurl_qq_1,
                                        openid: data.openid,
                                        unionid: data.unionid,
                                        oauth: 'Qq'
                                    };
                                    vm.bindAccount(params, data, 'Qq');
                                } else {
                                    alert('QQ登录获取用户信息失败:' + err.msg);
                                }
                            });
                        }
                    });
                },
                login_taobao: function () {
                    aliTradePlus.showLogin(function (ret, err) {
                        if (!ret && err && err.code == 1) {
                            setTimeout(vm.login_taobao, 300);
                        }
                        if (ret && ret.openId) {
                            var params = {
                                nickname: ret.nick,
                                portrait: ret.avatarUrl,
                                openid: ret.openId,
                                oauth: 'Taobao'
                            };
                            var data = {
                                openid: ret.openId,
                                oauth: 'Taobao'
                            };
                            vm.bindAccount(params, data, 'Taobao');
                        }
                    });
                },
                login_jd: function () {
                    jd.login({}, function (ret) {
                        if (ret) {
                            var params = {
                                nickname: ret.nickname,
                                openid: ret.uid,
                                oauth: 'Jd'
                            };
                            var data = {
                                openid: ret.uid,
                                oauth: 'Jd'
                            };
                            vm.bindAccount(params, data, 'Jd');
                        }
                    });
                },
                tabsSwitch: function(tabIndex) {

                    var tabCardCollection = document.querySelectorAll(".tab-card"),
                        len = tabCardCollection.length;

                    for(var i = 0; i < len; i++) {
                        tabCardCollection[i].style.display = "none";
                        this.tabsName[i].isActive = false;
                    }
                    this.tabsName[tabIndex].isActive = true;
                    tabCardCollection[tabIndex].style.display = "block";
                },
                coderegister: function(tabIndex) {

                    openWin('coderegister');
                }
            },
            created: function () {
                var that = this;
                wx.isInstalled(function (ret) {
                    that.appInstalled.wx = ret.installed;
                });
                qq.installed(function (ret) {
                    that.appInstalled.qq = ret.status;
                });
            }
        })
    }

    function addListeners() {
//        api.addEventListener({
//            name: 'viewappear'
//        }, function () {
//            var pageParam = api.pageParam;
//            if (pageParam && pageParam.from) {
//                closeWin(pageParam.from);
//            }
//        })
    }

</script>
</html>
